<template>
  <div class="container">
    <div class="compents">
      <div class="compent">
        <img src="../../assets/lunbo.png" alt="" srcset="" />
        <span>轮播图</span>
      </div>
    </div>
    <div class="edit-content">
      <div class="content">
        <div class="swiper">
          <div class="swiper-wrapper">
            <div class="swiper-slide">Slide 1</div>
            <div class="swiper-slide">Slide 2</div>
            <div class="swiper-slide">Slide 3</div>
          </div>
          <!-- 如果需要分页器 -->
          <div class="swiper-pagination"></div>

          <!-- 如果需要导航按钮 -->
          <div class="swiper-button-prev"></div>
          <div class="swiper-button-next"></div>

          <!-- 如果需要滚动条 -->
          <div class="swiper-scrollbar"></div>
        </div>
        <div style="border: 1px solid #ccc">
          <!-- <Toolbar
            style="border-bottom: 1px solid #ccc"
            :editor="editor"
            :defaultConfig="toolbarConfig"
            :mode="mode"
          /> -->
          <!-- <Editor
            style="height: 500px; overflow-y: hidden"
            v-model="html"
            :defaultConfig="editorConfig"
            :mode="mode"
            @onCreated="onCreated"
          /> -->
        </div>
      </div>
    </div>
    <div class="style-content"></div>
  </div>
</template>
<script>
import { EventBus } from "@/untils/event";

// import 'swiper/dist/js/swiper'
// import 'swiper/dist/css/swiper.css'
import Swiper from "swiper";

export default {
  name: "ScreenInfo",
  data() {
    return {
      html: "<p>hello</p>",
      toolbarConfig: {},
      editorConfig: { placeholder: "请输入内容..." },
      mode: "default", // or 'simple'
    };
  },
  components: {
    // Toolbar
  },
  methods: {
    async getData() {
      try {
        const resultObj = await this.$API.getScreenList(this.params);
        this.tableDate = resultObj.records;
        this.currentPage = resultObj.current;
        this.total = resultObj.total;
      } catch (err) {
        console.error(err);
      }
    },
    search(obj) {
      this.params = Object.assign(this.params, obj);
      this.getData();
    },
    addScreenFn() {
      // 进入编辑界面
      console.log("edit");
      this.$router.push({
        path: "/srceen/srceenInfo",
      });
    },
    isDisableFn(row) {
      this.type = row.screenState === 1 ? 0 : 1;
      this.currentTableObj = row;
      this.dialogVisible = true;
    },
    editFn(row) {
      this.$router.push({
        path: "/tenant/tenantInfo",
        query: { id: row.name },
      });
    },
    delFn() {
      this.type = 3;
      this.dialogVisible = true;
    },
    async sureFn() {
      const { type, currentTableObj } = this;
      let curParams = {
        id: "",
        screenState: "",
      };
      let urlApi = null;
      if (type === 3) {
        // 删除
        urlApi = this.$API.delScreen;
        curParams = { id: currentTableObj.id };
      } else {
        // 禁用/启用
        curParams = {
          id: currentTableObj.id,
          screenState: currentTableObj.screenState === 1 ? 0 : 1,
        };
        urlApi = this.$API.updScreen;
      }
      this.dialogVisible = false;
      try {
        const res = await urlApi(curParams);
        console.log(res);
        this.getData();
      } catch (err) {
        console.error(err);
      }
    },
  },
  mounted() {
    EventBus.$emit("changeCollapse", true);
    EventBus.$emit("changeSrceen", true);
    new Swiper(".swiper", {
      direction: "vertical", // 垂直切换选项
      loop: true, // 循环模式选项

      // 如果需要分页器
      pagination: {
        el: ".swiper-pagination",
      },

      // 如果需要前进后退按钮
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },

      // 如果需要滚动条
      scrollbar: {
        el: ".swiper-scrollbar",
      },
    });
  },
  beforeDestroy() {
    EventBus.$emit("changeCollapse", false);
    EventBus.$emit("changeSrceen", false);
    // const {editor} = this
    // if (editor == null) return
    // editor.destroy() // 组件销毁时，及时销毁编辑器
  },
};
</script>
<style lang="scss" scoped>
 .container{
  display: flex;
  justify-content: space-between;
  height: 100%;
  .compents{
    width: 200px;
    height: 100%;
    background: #fff;
  }
  .edit-content{
    height: calc(100% - 30px);
    width: calc(100% - 400px);
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    .content{
      background: #fff;
      width: 405px;
      height: 720px;
    }
    // .content{
    //   background: #fff;
    //   width: 640px;
    //   height: 360px;
    // }
    
  }
  .style-content{
    height: 100%;
    width: 200px;
    overflow-x:auto;
    background: #fff;
  }
 }
</style>
